<template>
	<view class="box">
		<view style="height: 100rpx;background-color: #F1F2F5;">
			<view class="serchBox plr30 ptb20 flex">
				<u-search placeholder="输入关键字搜索" v-model="pageList.keywords" shape="square" :showAction="false"
					style="width: calc(100% - 170rpx)"></u-search>
				<view class="btn1" @click="handleSerch">搜索</view>
			</view>
		</view>
		<view style="margin-top: 20vh;" v-if="!loadingPage">
			<u-empty mode="list"></u-empty>
		</view>
		<base-loading :flag="showLoading" />
		<image @touchmove.stop.prevent="() => {}" class="iconImg" :style="'right:0rpx;transform:translate3d('+xMove+'px,'+yMove+'px,0)'"
			src="../../static/iconAdd.png" @click="iconAdd" @touchstart="handleStart" @touchmove="handleMove"
			@touchend="handleEnd">
		</image>
		<view v-if="zzc" @touchmove.stop.prevent="() => {}" style="width: 100vw;height: 100vh;z-index: 20;background-color: rgba(255,255,255,0);position: fixed;"></view>
		<view class="pt20 pb190" v-if="loadingPage">
			<u-checkbox-group v-model="oddSelectValue" placement="column" @change="oddCheckChange">
				<view class="boxItem plr30 mlr20 mb20 flex" v-for="(item, index) in lampArr" :key="index"
					@click="navTo(item)">
					<u-checkbox shape="circle" :key="index" :name="item.hiddenDangerId"></u-checkbox>
					<view>
						<view class="flex mb20">
							<view class="name w160">隐患编号：</view>
							<view class="value nowrap">{{item.hiddenDangerCode}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w160">隐患简题：</view>
							<view class="value">{{item.hiddenDangerTitle}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w160">隐患来源：</view>
							<view class="value">{{item.hiddenDangerRourceDesc}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w160">隐患类型：</view>
							<view class="value">{{item.hiddenDangerTypeDesc}}</view>
						</view>
						<view class="flex mb20" v-if="item.hiddenDangerAssessmentLevelDesc">
							<view class="name w160">评估等级：</view>
							<view class="value">{{item.hiddenDangerAssessmentLevelDesc | filterNull}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w160">发现日期：</view>
							<view class="value">{{item.hiddenDangerFindTime.slice(0,11)}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w160">发现人：</view>
							<view class="value">{{item.hiddenDangerFindUsername}}</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="maintenance">
			<view class="flex-row flex-two pt20">
				<u-checkbox-group v-model="allSelectValue" placement="column" @change="allCheckChange">
					<u-checkbox shape="circle" label="全选" name="1"></u-checkbox>
				</u-checkbox-group>
				<view class="flex flex-two">
					<view class="btn but1" @click="showpopup=true">删除</view>
					<view class="btn but2 ml20" @click="batchReport">发送</view>
				</view>
			</view>
		</view>
		<u-popup :show="showpopup" mode="center" @close="showpopup=false">
			<view class="popup">
				<view class="mb50">是否确定删除？</view>
				<view class="flex flex-two">
					<view class="btn but1" @click="showpopup=false">取消</view>
					<view class="btn but2" @click="batchDelete">确定</view>
				</view>
			</view>
		</u-popup>
		<optionCard :show="show" @showPopup="show=false" @listItem="listItem" :event="true" :roleCode="roleCode"
			:selfFlag="selfFlag">
		</optionCard>
	</view>
</template>

<script>
	var curPoint = {
	    x: 0,
	    y: 0
	}; // 记录原点
	var startPoint = {};
	// 标志位（只触发点击事件按，并没有移动-就不必触发end事件）
	var isTouchMove = false;
	import optionCard from "./components/option-card.vue"
	export default {
		components: {
			optionCard,
		},
		data() {
			return {
				zzc:false,
				xMove: 0,
				yMove: 0,
				roleCode: '',
				selfFlag: '',
				// 显示发送人
				show: false,
				// 显示弹框
				showpopup: false,
				//	单选选中列表
				oddSelectValue: [],
				// 全选选中列表
				allSelectValue: [],
				// 所有数据列表
				lampArr: [],
				itemCount: 0, //总数
				pageList: {
					keywords: '',
					pageIndex: 1,
					pageSize: 10
				},
				showLoading: false,
				getDictsByCodeYHLY: [],
				getDictsByCodeYHZY: [],
				loadingPage: false,
				sendPersonId: ''
			}
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			console.log('到底')
			if (this.itemCount > this.lampArr.length) {
				this.pageList.pageIndex++
				this.requestList()
			}
		},
		methods: {
			//初始化
			init() {
				console.log(11)
				uni.pageScrollTo({ //滚动条回到顶部
					scrollTop: 0,
					duration: 300
				})
				this.lampArr = [] //清空原列表
				this.pageList.pageIndex = 1 //页码回到第一页
				this.requestList()
			},
			async listItem(e) {
				let arr = []
				this.lampArr.forEach((item) => {
					this.oddSelectValue.forEach((item1) => {
						if (item.hiddenDangerId == item1) {
							arr.push({
								troubleId: item.hiddenDangerId,
								selectUserId: e.id,
								sendPersonId: e.id,
								currentState2: item.currentState2,
								evaGrade: item.evaGrade,
							})
						}
					})
				})
				// console.log(arr)
				// let res = await this.request(this.$api.checkUserPermission, arr, 'POST')
				// console.log(res)
				let res1 = await this.request(this.$api.sendInfo, arr, 'POST')
				this.show = false
				this.pageList.pageIndex = 1
				this.lampArr = []
				this.oddSelectValue = [],
					this.allSelectValue = [],
					this.requestList()
				uni.showToast({
					icon: 'success',
					title: '发送成功'
				})
				// console.log('隐患id',this.oddSelectValue)
				// console.log('发送人id',e)
			},
			iconAdd() {
				uni.navigateTo({
					url: './addHiddenDanger'
				})
			},
			navTo(item) {
				uni.navigateTo({
					url: './hiddenDetails?hiddenDangerId=' + item.hiddenDangerId
				})
			},
			//列表
			async requestList() {
				this.showLoading = true
				let {
					resultValue: res
				} = await this.request(this.$api.getHiddenDangerInitPageList, this.pageList, 'GET')
				// console.log('res123', res.items)
				setTimeout(() => {
					this.lampArr = this.lampArr.concat(res.items)
					this.itemCount = res.itemCount
					this.showLoading = false
					this.loading()
					this.getDictsByCode()
				}, 300)
			},
			//字典信息
			async getDictsByCode() {
				let data = {}
				if (!this.getDictsByCodeYHLY[0]) {
					data = {
						typeCode: "YHLY"
					}; //隐患来源
					let {
						resultValue: res
					} = await this.request(this.$api.getDictsByCode, data, "POST")
					this.getDictsByCodeYHLY = res.items
					console.log('字典查询', res.items)
				}
				if (!this.getDictsByCodeYHZY[0]) {
					data = {
						typeCode: "YHZY"
					}; //隐患分类
					let {
						resultValue: res1
					} = await this.request(this.$api.getDictsByCode, data, "POST")
					this.getDictsByCodeYHZY = res1.items
					// console.log('字典查询', res1.items)
				}
				this.lampArr.forEach((item) => {
					this.getDictsByCodeYHLY.forEach((i) => {
						if (item.hiddenDangerRourceDesc == i.dicCode) {
							item.hiddenDangerRourceDesc = i.dicName
						}
					})
					this.getDictsByCodeYHZY.forEach((i) => {
						if (item.hiddenDangerTypeDesc == i.dicCode) {
							item.hiddenDangerTypeDesc = i.dicName
						}
					})
				})
			},
			//搜索框
			handleSerch() {
				this.pageList.pageIndex = 1
				this.lampArr = []
				this.requestList()
			},
			//单选
			oddCheckChange(n) {
				if (n.length == this.lampArr.length) {
					this.allSelectValue.push("1")
				} else {
					this.allSelectValue = []
				}
			},
			//全选
			allCheckChange(n) {
				this.oddSelectValue = []
				if (n.length == 1) {
					this.lampArr.forEach((item) => {
						this.oddSelectValue.push(item.hiddenDangerId)
					})
				}
			},
			//删除按钮hiddenInfoDelete
			async batchDelete() {
				this.showpopup = false
				// console.log(this.oddSelectValue)
				if (this.oddSelectValue.length >= 1) {
					let arr = []
					this.oddSelectValue.forEach((item) => {
						arr.push({
							troubleId: item
						})
					})
					// console.log(arr)
					let res = await this.request(this.$api.hiddenInfoDelete, arr, "POST")
					// console.log(res)
					uni.showToast({
						title:"删除隐患成功",
						icon:"success"
					})
					this.pageList.pageIndex = 1
					this.lampArr = []
					this.requestList()
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择隐患信息"
					})
				}
			},
			// 发送按钮
			batchReport() {
				if (this.oddSelectValue.length >= 1) {
					let params = {
						currentState2: this.lampArr[0].currentState2,
						// isRnvPeople: 1
					}
					this.request(this.$api.getHiddenDangerUserRoleCode, params, "POST").then(({
						resultValue: res
					}) => {
						this.roleCode = res.roleCode
						this.selfFlag = res.selfFlag
						console.log(this.roleCode)
						this.show = true
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择隐患信息"
					})
				}
			},
			loading() {
				if (this.lampArr[0]) {
					this.loadingPage = true
				} else {
					this.loadingPage = false
				}
			},
			handleStart(ev) {
				// console.log('start',ev);
				// 记录一开始手指按下的坐标
				var touch = ev.changedTouches[0];
				startPoint.x = touch.pageX;
				startPoint.y = touch.pageY;
			},
			handleMove(ev) {
				// console.log('move',ev);
				// 防止页面高度很大，出现滚动条，不能移动-默认拖动滚动条事件
				ev.preventDefault();
				this.zzc = true
				isTouchMove = true;

				var touch = ev.changedTouches[0];
				var diffPonit = {}; // 存放差值
				var movePonit = {
					// 记录移动的距离
					x: 0,
					y: 0
				};
				diffPonit.x = touch.pageX - startPoint.x;
				diffPonit.y = touch.pageY - startPoint.y;
				// 移动的距离 = 差值 + 当前坐标点
				movePonit.x = diffPonit.x + curPoint.x;
				movePonit.y = diffPonit.y + curPoint.y;
				this.move(movePonit.x, movePonit.y);
			},
			handleEnd(ev) {
				// console.log('end', ev);
				if (!isTouchMove) return;
				this.zzc = false
				//  更新坐标原点
				var touch = ev.changedTouches[0];

				curPoint.x += touch.pageX - startPoint.x;
				curPoint.y += touch.pageY - startPoint.y;

				// 重置
				isTouchMove = false;
			},
			move(x, y) {
				x = x || 0; // 没有传就是0
				y = y || 0;
				this.xMove = x;
				this.yMove = y;
				// translate3d  (tx,ty,tz)  在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px
			}
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
		position: relative;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.maintenance {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		height: 188rpx;
		width: 100%;
		box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.09);
		text-align: center;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.serchBox {
		box-sizing: border-box;
		background-color: #fff;
		height: 100rpx;
		position: fixed;
		width: 100%;
		z-index: 520;
		box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.09);
	}

	.btn {
		box-sizing: border-box;
		width: 140rpx;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		border-radius: 14rpx;
	}

	.but1 {
		border: 1px solid #3473F9;
		color: #3473F9;
	}

	.but2 {
		background-color: #3473F9;
		color: #FFFFFF;
	}

	.btn1 {
		width: 140rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 6px;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		margin: -4rpx 0 0 20rpx;
		font-size: 28rpx;
	}

	.popup {
		font-size: 32rpx;
		width: 500rpx;
		box-sizing: border-box;
		padding: 60rpx;
	}

	>>>.u-popup__content {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.iconImg {
		top: 60vh;
		width: 150rpx;
		height: 150rpx;
		position: fixed;
		z-index: 999;
		transition: right 1s;
	}
</style>
